<template>
	<view class="content">
		<SwitchPatient :fun="swit" :id="data.id"></SwitchPatient>
		<!-- 核酸检测申请 ncApplication -->
		<view class="tip">科室-保健科</view>
		<view class="">选择预约时间</view>
		<view class="week" >
			<view class="item" v-for="(item,value) in time.tList">
				<text>{{item.weekDay}}</text>
				<text class="num"  @click="alterTime(value),changeTime(item.strDay)" :style="{
					backgroundColor:time.status==value?'#006eff':' #e6f1ff',color:time.status==value? '#fff' :''}">{{item.day}}</text>
			</view>
		</view>
		<view class="tip">上午号源</view>
		<view class="time" >
			<view style="display: flex;" v-for="item in am">
				<text v-if="item.num>0" class="one" @click="go(data.id)">{{item.time}}剩余{{item.num}}</text>
				<text v-else class="two" @click="go(data.id)">{{item.time}}</text>
			</view>
			
		</view>
		<view class="tip">下午号源</view>
		<view class="time" >
			<view style="display: flex;" v-for="item in pm">
				<text v-if="item.num>0" class="one" @click="go(data.id)">{{item.time}}剩余{{item.num}}</text>
				<text v-else class="two" @click="go(data.id)">{{item.time}}</text>
			</view>
			
			
		</view>
	</view>
</template>

<script setup>
import { reactive ,onMounted,ref} from "vue";
import SwitchPatient from '@/components/SwitchPatient.vue'
import { onLoad } from '@dcloudio/uni-app';
import {weekApi,dayApi} from '@/api/nucleicAcidApi.js'
let day
let go = (id) => {
	uni.navigateTo({
		url: `/pages/nucleicAcidTesting/confirmReserveInfo/confirmReserveInfo?id=${id}`
	})
}
let time=reactive({
	status:0,
	tList:[
		{day:'3',weekDay:'今日',strDay:''}
	],
})
let alterTime=value=>{
	time.status=value
	console.log(value)
}
let dayTime=reactive({
	
})
let today=reactive({
	strToday:'2022-11-24'
})
console.log(today.strToday)
weekApi().then((res)=>{
	if (res.data.code == 0) {
		console.log('成功！',res)
		time.tList=res.data.data.week7
		today.strToday=res.data.data.today
		console.log(today.strToday,res.data.data.today)
		dayApi(today.strToday).then((res)=>{
			if (res.data.code == 0) {
				console.log('成功！',res)
				// time.tList=res.data.data.week7
			}
		})
	}
})
	
let am=reactive([])
let pm=reactive([])
dayApi('2022-11-23').then((res)=>{
	if (res.data.code == 0) {
		console.log(res)
		dayTime=res.data.data
		console.log(dayTime.am[0].time)
		am.push(...dayTime.am)
		pm.push(...dayTime.pm)
		console.log(12,am,pm)
	}
})
let changeTime=(v)=>{
	console.log(v)
	dayApi(v).then((res)=>{
		console.log(res)
		if (res.data.code == 0) {
			console.log(res)
			dayTime=res.data.data
			console.log(dayTime.am[0].time)
			am=dayTime.am
			pm=dayTime.pm
			console.log(am,pm)
			
		}else{
			am=reactive([])
			pm=reactive([])
			console.log(am,pm)
		}
	})
}
onMounted(()=>{
	// changeTime('2022-11-23')
})
let data=reactive({
	id:0
})
onLoad(option => {
	data.id = option.id;
	console.log(option.id,78,data.id);
});

</script>

<style lang="less">
.content {
	margin: 40rpx 30rpx;
	.week {
		display: flex;
		justify-content: space-evenly;
		margin: 40rpx 0;
		border: 1px solid #e6f1ff;
		border-radius: 10rpx;
		.item {
			text {
				font-size: 25rpx;
			}
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: center;
			height: 200rpx;

			.count {
				width: 80rpx;
				height: 60rpx;
				background-color: #006eff;
				line-height: 60rpx;
				text-align: center;
				color: aliceblue;
				border-radius: 30rpx;
			}
			.num {
				width: 80rpx;
				height: 60rpx;
				background-color: #e6f1ff;
				line-height: 60rpx;
				text-align: center;
				color: black;
				border-radius: 30rpx;
			}
		}
	}
	.time {
		display: flex;
		flex-wrap: wrap;
		
		
		.one {
			margin: 20rpx 30rpx;
			width: 200rpx;
			height: 70rpx;
			background-color: #eff6ff;
			text-align: center;
			line-height: 70rpx;
			font-size: 25rpx;
		}
		.two {
			margin: 20rpx 0;
			width: 200rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background-color: #f2f2f2;
			font-size: 25rpx;
		}
	}
	.tip {
		color: #aaaab2;
		font-size: 30rpx;
		margin: 20rpx 0;
	}
}
</style>
